<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-cache/no-store" />
  <title>工序表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <!-- 查询条件 -->
    <div class="companyMaterialTable">
      <el-container style="height:100%">
        <el-aside width="30%" class="aside">
          <div class="companyMaterialForm" v-loading="loading">
            <el-form class="material-form" :model="updateProcessDetail" label-width="120px" size="medium">
              <el-form-item label="工序表">
                <el-button type="primary" @click="importDialog = true">导入工序</el-button>
              </el-form-item>
              <el-form-item label="工序代码">
                {{updateProcessDetail.processCode}}
              </el-form-item>
              <el-form-item label="部门">
                {{updateProcessDetail.pageDeptName}}
              </el-form-item>
              <el-form-item label="车间名称">
                {{updateProcessDetail.pageWorkShopName}}
              </el-form-item>
              <el-form-item label="工序名称">
                <el-input class="form-input" v-model="updateProcessDetail.processName"
                  v-if="updateProcessDetail.processName!= '交接入库' && updateProcessDetail.processName!= '交接出库'"></el-input>
                <span v-else>{{updateProcessDetail.processName}}</span>
              </el-form-item>
              <el-form-item label="报工方式">
                <span>{{i18n.getMsg('workReport.reportMode.'+updateProcessDetail.reportMode)}}</span>
              </el-form-item>
              <el-form-item label="报工方式(修改)">
                <el-select style="width:200px;" v-model="updateProcessDetail.reportModeRecord">
                  <el-option v-for="item in reportModeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-select placeholder="请选择状态" v-model='updateProcessDetail.status' class="form-input">
                  <el-option value="使用" label="使用"></el-option>
                  <el-option value="禁用" label="禁用"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="加工对象">
                <span v-if="updateProcessDetail.processName=='交接入库'  || updateProcessDetail.processName=='交接出库'">所有</span>
                <div v-else-if="updateProcessDetail.processingObjects.length > 0" @click="updateDialog = true">
                  <el-button type="text" v-for=" pro in updateProcessDetail.processingObjects" :key='pro'>{{pro}}</el-button>
                </div>
                <div v-else @click="updateDialog = true">
                  <el-button type="text">设置加工对象</el-button>
                </div>
              </el-form-item>
              <el-form-item label="工序作业时间(秒)">
                <el-input-number class="form-input" v-model="updateProcessDetail.workingProcedureDuration" :min="0" label="工序作业时间"></el-input-number>
              </el-form-item>
              <el-form-item label="工序交接时间(秒)">
                <el-input-number class="form-input" v-model="updateProcessDetail.handoverTime" :min="0" label="工序作业时间"></el-input-number>
              </el-form-item>
              <el-form-item label="顺序">
                <el-input-number v-model="updateProcessDetail.sort" :min="0" label="顺序" controls-position="right"></el-input-number>
              </el-form-item>
              <el-form-item label="计价单位">
                <el-select placeholder="请选择计价单位" v-model='updateProcessDetail.chargeUnit' class="form-input">
                  <el-option value="付" label="付"></el-option>
                  <el-option value="款" label="款"></el-option>
                </el-select>
                <div class="el-form-item__error">注：`付`代表按数量计 `款`代表按订单计</div>
              </el-form-item>
              <el-form-item label="计时单位">
                <el-select placeholder="请选择计时单位" v-model='updateProcessDetail.timeUnit' class="form-input">
                  <el-option value="付" label="付"></el-option>
                  <el-option value="款" label="款"></el-option>
                </el-select>
                <div class="el-form-item__error">注：`付`代表按数量计 `款`代表按订单计</div>
              </el-form-item>
              <el-form-item label="单价">
                <el-input-number v-model="updateProcessDetail.unitPrice" :min="0" :precision="4" label="单价"></el-input-number>
              </el-form-item>
              <el-form-item label="是否要审核">
                <el-select placeholder="请选择是否需要审核" v-model='updateProcessDetail.isNeedReviewed' class="form-input">
                  <el-option :value="1" label="是"></el-option>
                  <el-option :value="0" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="可审核人" v-if="updateProcessDetail.isNeedReviewed===1">
                <div v-if="updateProcessDetail.reviewerList.length > 0 " @click="updateSetUserDialog = true">
                  <el-button type="text" v-for=" pro in updateProcessDetail.reviewerList">{{pro.approverName}}</el-button>
                </div>
                <div v-else @click="updateSetUserDialog = true">
                  <el-button type="text">设置审核人</el-button>
                </div>
              </el-form-item>

              <el-form-item label="qc审核人" v-if="updateProcessDetail.isNeedReviewed===1">
                <el-select filterable clearable multiple v-model="updateProcessDetail.qcReviewerIds">
                  <el-option v-for="person in personData" :key="person.key" :value="person.key" :label="person.label"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="创建人">
                {{updateProcessDetail.creater}}
              </el-form-item>
              <el-form-item label="创建时间">
                {{updateProcessDetail.creationTime}}
              </el-form-item>
              <el-form-item label="最后修改人">
                {{updateProcessDetail.lastModifier}}
              </el-form-item>
              <el-form-item label="最后修改时间">
                {{updateProcessDetail.lastModifyTime}}
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateProcess()">修改</el-button>
                <el-button v-if="updateProcessDetail.id!==''" type="primary" @click="qcFormSetting('update')">设置qc表单</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 修改工序，设置加工对象 -->
          <el-dialog title="修改-设置加工对象" :visible.sync="updateDialog" width="50%">
            <template v-if="updateDialog">
              <el-transfer v-model="updateProcessDetail.processingObjects" :data="materialData" filterable :filter-method="filterMethod"
                filter-placeholder="请输入物料类型" :titles="['未有对象', '已有对象']">
              </el-transfer>
            </template>
            <span slot="footer" class="dialog-footer">
            </span>
          </el-dialog>

          <!-- 修改工序，设置可审核人 -->
          <el-dialog title="修改-设置可审核人" :visible.sync="updateSetUserDialog" width="50%">
            <template v-if="updateSetUserDialog">
              <el-transfer v-model="updateProcessDetail.reviewerUserId" :data="personData" filterable :filter-method="filterMethod"
                filter-placeholder="请输入员工姓名" :titles="['不可审核人', '可审核人']" @change="updateSetUserChange()">
              </el-transfer>
            </template>
            <span slot="footer" class="dialog-footer">
            </span>
          </el-dialog>
        </el-aside>

        <el-main width="70%" class="main process-table-table-main">
          <div>
            <el-form :model="search" style='padding:0 10px;' size="mini" :inline="true">
              <el-form-item label="筛选">
                <el-input v-model="search.searchText" placeholder="请输入部门/车间/工序" style='width:200px;'></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select placeholder="请选择状态" v-model='search.view' style='width:80px;'>
                  <el-option :value="1" label="使用"></el-option>
                  <el-option :value="0" label="禁用"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="setProcessList(true)">搜索</el-button>
                <el-button type="primary" @click="addDialog=true">添加工序</el-button>
                <el-button type="primary" @click="exportExcel">导出Excel</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="process-table-table-div">
            <el-table fit stripe border :data="processList" style="width:100%" height="parent" @row-click="getProcessDetail">
              <el-table-column prop="productionLine" label="部门名称" min-width="120px" header-align="center"></el-table-column>
              <el-table-column prop="workshopName" label="车间名称" min-width="120px" header-align="center"></el-table-column>
              <el-table-column prop="processName" label="工序名称" min-width="120px" header-align="center"></el-table-column>
              <el-table-column prop="unitPrice" label="单价" min-width="40px" header-align="center"></el-table-column>
              <el-table-column prop="status" label="状态" min-width="60px" align="center"></el-table-column>
              <el-table-column :resizable="false" label="操作" width="105px" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click.stop="qcFormSetting('table',scope.row)">设置qc表单</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
          </table-pagination>
        </el-main>
      </el-container>

      <!-- 导入工序 -->
      <el-dialog title="导入工序" :visible.sync="importDialog" width="80%">
        <template>
          <el-transfer v-model="adminProcessIdList" :data="adminProcessList" filterable :filter-method="filterMethod" filter-placeholder="请输入部门/车间/工序"
            :titles="['未有工序', '已有工序']">
          </el-transfer>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button @click="importDialog = false">取 消</el-button>
          <el-button type="primary" @click="importProcess()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加工序设置加工对象 -->
      <el-dialog title="添加-设置加工对象" :visible.sync="addMaterialDialog" width="50%">
        <template v-if="addMaterialDialog">
          <el-transfer v-model="addProcessDetail.processingObjects" :data="materialData" filterable :filter-method="filterMethod"
            filter-placeholder="请输入物料类型" :titles="['未有对象', '已有对象']">
          </el-transfer>
        </template>
        <span slot="footer" class="dialog-footer">
        </span>
      </el-dialog>
      <!-- 添加工序，设置可审核人 -->
      <el-dialog title="添加-设置可审核人" :visible.sync="addSetUserDialog" width="50%">
        <template v-if="addSetUserDialog">
          <el-transfer v-model="addProcessDetail.reviewerUserId" :data="personData" filterable :filter-method="filterMethod"
            filter-placeholder="请输入员工姓名" :titles="['不可审核人', '可审核人']" @change="addSetUserChange()">
          </el-transfer>
        </template>
        <span slot="footer" class="dialog-footer">
        </span>
      </el-dialog>
      <!-- 添加工序 -->
      <el-dialog title="添加工序" :visible.sync="addDialog" width="70%" top="5vh">
        <div v-if="addDialog" style="height:calc(90vh - 124px);overflow:auto">
        <div style="padding:0 20px 5px">
          <el-form class="material-form" :model="addProcessDetail" label-width="120px" size="medium">
            <el-form-item label="部门">
              <el-select style="width:120px;" placeholder="请选择部门" v-model='addProcessDetail.productionLine'
                @change="addWorkList=workShopList[addProcessDetail.productionLine];addProcessDetail.workshopName=0;">
                <el-option :value="0" label="请选择部门"></el-option>
                <el-option v-for="dept in deptList" :key="dept.deptId" :label="dept.productionLine" :value="dept.deptId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="车间名称">
              <el-select style="width:120px;" placeholder="请选择车间" v-model='addProcessDetail.workshopName'>
                <el-option :value="0" label="请选择车间"></el-option>
                <el-option v-for="work in addWorkList" :key="work.id" :label="work.workshopName" :value="work.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工序名称">
              <el-input style="width:200px;" v-model="addProcessDetail.processName"></el-input>
            </el-form-item>
            <el-form-item label="报工方式">
              <el-select style="width:200px;" v-model="addProcessDetail.reportModeRecord">
                <el-option v-for="item in reportModeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="加工对象">
              <span v-if="addProcessDetail.processName=='交接入库'  || addProcessDetail.processName=='交接出库'">所有</span>
              <div v-else-if="addProcessDetail.processingObjects.length > 0" @click="addMaterialDialog = true">
                <el-button type="text" v-for=" pro in addProcessDetail.processingObjects" :key='pro'>{{pro}}</el-button>
              </div>
              <div v-else @click="addMaterialDialog = true">
                <el-button type="text">设置加工对象</el-button>
              </div>
            </el-form-item>
            <el-form-item label="工序作业时间(秒)">
              <el-input-number class="form-input" v-model="addProcessDetail.workingProcedureDuration" :min="0" label="工序作业时间"></el-input-number>
            </el-form-item>
            <el-form-item label="工序交接时间(秒)">
              <el-input-number class="form-input" v-model="addProcessDetail.handoverTime" :min="0" label="工序作业时间"></el-input-number>
            </el-form-item>
            <el-form-item label="顺序">
              <el-input-number v-model="addProcessDetail.sort" :min="0" label="顺序"></el-input-number>
            </el-form-item>
            <el-form-item label="计价单位">
              <el-select placeholder="请选择计价单位" v-model='addProcessDetail.chargeUnit' class="form-input">
                <el-option value="付" label="付"></el-option>
                <el-option value="款" label="款"></el-option>
              </el-select>
              <div class="el-form-item__error">注：`付`代表按数量计 `款`代表按订单计</div>
            </el-form-item>
            <el-form-item label="计时单位">
              <el-select placeholder="请选择计时单位" v-model='addProcessDetail.timeUnit' class="form-input">
                <el-option value="付" label="付"></el-option>
                <el-option value="款" label="款"></el-option>
              </el-select>
              <div class="el-form-item__error">注：`付`代表按数量计 `款`代表按订单计</div>
            </el-form-item>
            <el-form-item label="单价">
              <el-input-number v-model="addProcessDetail.unitPrice" :min="0" :precision="4" label="单价"></el-input-number>
            </el-form-item>
            <el-form-item label="是否要审核">
              <el-select placeholder="请选择是否需要审核" v-model='addProcessDetail.isNeedReviewed' class="form-input">
                <el-option :value="1" label="是"></el-option>
                <el-option :value="0" label="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="可审核人" v-if="addProcessDetail.isNeedReviewed == 1">
              <div v-if="addProcessDetail.reviewerList.length > 0 " @click="addSetUserDialog = true">
                <el-button type="text" v-for=" pro in addProcessDetail.reviewerList">{{pro.approverName}}</el-button>
              </div>
              <div v-else @click="addSetUserDialog = true">
                <el-button type="text">设置审核人</el-button>
              </div>
            </el-form-item>

            <el-form-item label="qc审核人">
              <el-select filterable clearable multiple v-model="addProcessDetail.qcReviewerIds">
                <el-option v-for="person in personData" :key="person.key" :value="person.key" :label="person.label"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button type="primary" @click="addProcess()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog fullscreen class="dialog-fullscreen" title="设置qc表单" :visible.sync="openSetting" @closed="selectProcess=null">
        <div style="height:100%;overflow:auto">
          <qc-form-setting v-if="openSetting" :work-process="selectProcess" @setting-success="openSetting=false"></qc-form-setting>
        </div>
      </el-dialog>
    </div>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/imgUpload.css",
    "/vueSystem/components/css/videoUpload.css",
    "productMgr/workProcessTable/css/qcFormSetting.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/videoUpload.js"
  ]);

</script>
<script src="./productMgr/models/ProcessQcForm.js"></script>
<script src="vueSystem/components/sysCommonSearch.js"></script>
<script src="./productMgr/workProcessTable/qcFormSetting.js"></script>

<script src="myJs/processNew.js"></script>

<style>
  .companyMaterialTable {
    overflow: auto;
    height: 100%;
    min-height: 400px;
  }

  .aside {
    padding-top: 20px;
  }

  .aside,
  .main {
    overflow: auto;
  }

  .process-table-table-main{
    display:flex;
    flex-direction: column;
  }

  .process-table-table-div{
    flex:1;
    overflow:auto;
  }

  .el-transfer-panel {
    width: calc(50% - 50px);
  }

</style>

</html>
